<template>
    <div class="top">
    
        <div class="top__myCenter" @click="goMyCenter">
            <i class="iconfont icon-yonghu"></i>
        </div>
    
                <!-- :class="curCarType==car.name?'is-active':''" -->
        <div class="top__CarType" ref="CarType">
            <div class="top__CarType__item"
                @click="selcectCar(car.name)"
                v-for="car in carTypeList"
                :key="car.name">
                <i :class="['iconfont',car.icon]"></i>
                <span>{{car.dec}}</span>
            </div>
        </div>
    
        <div class="top__moreCarTypeBtn" :class="{'is-active':moreShow}" @click="moreShow=!moreShow">
            <i class="iconfont icon-guanli"></i>
        </div>
    

        <!-- 全部车型展示 -->
         <transition name="slide_in_top"> 
            <div class="moreCarList" v-show="moreShow" @click.self="moreShow = false">
                <div class="moreCarList__title">全部服务</div>
                <div class="moreCarList__wrap">
                    <div class="moreCarList__item" 
                        @click="selcectCar(item.name)"
                        v-for="item in carTypeList" 
                        :key="item.name">

                        <img :src="item.url">
                        <span>{{item.dec}}</span>
                    </div>
                </div>
            </div>
         </transition> 

         <!-- 个人中心 -->
        <my-center @show="showMyCenter=false" :show="showMyCenter"></my-center>


    </div>
</template>

<script>
    import myCenter from '../myCenter/myCenter'
    export default {
        name:'top',
        data(){
            return {
                showMyCenter:false,
                moreShow:false,
                curCarType:'fastCar',
                carTypeList:[
                    {name:'fastCar',dec:'快车',icon:'icon-che1',url:require('../../assets/img/car_pic_special.png')},
                    // {name:'specialCar',dec:'专车',icon:'icon-qiche',url:require('../../assets/img/specialCar.png')},
                    // {name:'sharingCar',dec:'拼车',icon:'icon-qiche',url:require('../../assets/img/sharingCar.png')},
                    // {name:'taix',dec:'出租车',icon:'icon-qiche',url:require('../../assets/img/sharingCar.png')},
                    // {name:'weddingCar',dec:'顺风车',icon:'icon-qiche',url:require('../../assets/img/sharingCar.png')},
                    // {name:'rentCar',dec:'租车',icon:'icon-qiche',url:require('../../assets/img/sharingCar.png')},
                    // {name:'substitute',dec:'代驾',icon:'icon-qiche',url:require('../../assets/img/sharingCar.png')}
                ]
            }
        },
        components:{myCenter},
        methods:{
            selcectCar(type){
                this.curCarType=type;
                this.moreShow = false;
                let _index=this.carTypeList.findIndex(item=>item.name==type);
                if(_index && _index>=(this.carTypeList.length / 2)){
                    this.$refs.CarType.scrollLeft = 500
                }else{
                    this.$refs.CarType.scrollLeft = 0
                }
            },
            goMyCenter(){

                this.showMyCenter=true
                if(localStorage.login_info != ''){  //logining/exit
                }else{
                    //跳转到注册页面
                    this.$router.push('login')
                    
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../style/var.scss';

    .icon-che1{font-size: 26px;padding:0 10px;}
    .icon-yonghu{font-size: 25px;}
    .icon-guanli{font-size: 23px}
    // 主体--------------------------------------------------
    @b top{
        width:100%;
        height:125px;;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: $fill_light;
        box-shadow: 0 1px 10px 0px $border_base;
        
        @e myCenter{
            padding:50px;
            color:lighten($black,20%);
        }

        @e CarType{
            display: inline-flex;
            align-items:center;
            justify-content: space-between;
            flex-wrap: nowrap;
            height:100%; 
            overflow-x:scroll;

            @e item{
                display: inline-flex;
                align-items:center;
                justify-content: space-between;
                flex-shrink:0;
                margin:0 20px;
                font-size:14px;
                height:100%;
                color:$primary;
                
                @when active{
                    color:$primary;
                    border-bottom:10px solid $primary;
                }
            }
        }

        @e moreCarTypeBtn{
            padding:50px;
            transition: all .4s linear;
            color:#000;

            @when active{
                transform: rotate(360deg);
            }
        }
    }

    // 全部车型展示---------------------------------------
    @b moreCarList{
        position: absolute;
        top:0;
        left:0;
        z-index: 333;
        width:100%;
        height:1500px;
        background:transparent;
        @e title{
            width:100%;
            line-height: 150px;
            text-align:center;
            background:$fill_light;
            border-bottom:1px solid $border_base;
        }
        @e wrap{
            width:100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
            background:$fill_light;
        }
        @e item{
            width:(1/3)*100%;
            height:250px;
            display: inline-flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;
            border-right:1px solid $border_base;
            padding:20px 10px;
            font-size: 14px;

        }

    }

    //other--------------------------------------------
    .moreCarList__item img{
        width:50%;
    }
    .slide_in_top-enter-active,.slide_in_top-leave-to{
        transition: transform .5s
    }
    .slide_in_top-enter,.slide_in_top-leave-active{
        transform: translate3d(0,-100%,0);
        transition: transform .5s
    }
</style>

